<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table#tab{
				border: 1px solid red;
				border-collapse: collapse;
				width: 500px;
				text-align: center;
			}
			
			table#tab tr,
			table#tab tr th,
			table#tab tr td {
				border: 1px solid red;
			}
			table#tab tr td a{
				cursor: pointer;
			}
			
			.edit{
				color: #0000FF;
			}
			
			.delete {
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="entry">
				
			</div>
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>ID</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<!--<tr>
							<td>1</td>
							<td>张倩</td>
							<td>16</td>
							<td>小姐姐</td>
							<td>
								<a class='edit'>编辑</a>
								<a class='edit'></a>
							</td>
						</tr>-->
					</tbody>
				</table>
			</div>
		</div>
		<script type="text/javascript">
			var arr=[
				{id:1,user:"张倩",age:18,sex:1},
				{id:2,user:"翰林",age:17,sex:0},
				{id:3,user:"媛媛",age:19,sex:1},
				{id:4,user:"邢镇",age:16,sex:0}
			]
			
			var tbody=document.getElementById("tbody");
			tbody.innerHTML="";
			
			var trs="";
			
			for(var i=0;i<arr.length;i++){
				//console.log("arr["+i+"]:",arr[i]);
				//trs+="<tr><td>"+arr[i].id+"</td><td>"+arr[i].user+"</td><td>"+arr[i].age+"</td><td>"+(arr[i].sex=="0"?"小哥哥":"小姐姐")+"</td><td> <a class='edit'> 编辑 </a><a class='delete'> 删除</td></tr>"
				trs+="<tr>"+
							"<td>"+arr[i].id+"</td>"+
							"<td>"+arr[i].user+"</td>"+
							"<td>"+arr[i].age+"</td>"+
							"<td>"+(arr[i].sex=="0"?"小哥哥":"小姐姐")+"</td>"+
							"<td>"+
								"<a class='edit' onclick=myEdit("+JSON.stringify(arr[i])+")> 编辑 </a>"+
								"<a class='delete' onclick=myDelete("+arr[i].id+")> 删除 </a>"+
							"</td>"+
						"</tr>"
			}
			
			tbody.innerHTML=trs;
			
			
			function myEdit(obj) {
				console.log("你要编辑的数据是:",obj)
			}
			
			function myDelete(id){
				console.log("你要删除的数据id是:",id);
			}
			
			
		</script>
	</body>
</html>
